<script setup lang="ts">
import { ref } from 'vue';
import { MacItem } from '../../../types'
import macbook from '../imgs/macbook_pro_13__2.jpg'
import macair from '../imgs/macbook_air__2.jpg'
import MacItemCom from './MacItem.vue'

const macList = ref<MacItem[]>()
macList.value = [
  {
    imgSrc: macbook,
    goodName: 'MacBook Pro 13英寸',
    price: 9999,
    desc: ['13.3 英寸视网膜显示屏', '最高可选配 4 核 Intel Core i7 处理器', '最高可选配 32GB 内存',
      '最高可选配 4TB 存储设备', '电池续航时间最长可达 11 小时', '触控 ID', '背光妙控键盘'
    ]
  },
  {
    imgSrc: macair,
    goodName: 'MacBook Air',
    price: 7999,
    desc: ['13.3 英寸视网膜显示屏', '最高可选配 4 核 Intel Core i7 处理器', '最高可选配 16GB 内存',
      '最高可选配 2TB 存储设备', '电池续航时间最长可达 11 小时', '触控 ID', '背光妙控键盘'
    ]
  }
]


</script>

<template>
  <div class="comparecontainer _comparecontainer">
    <div class="comparebody">
      <div class="bodytop">哪台Mac笔记本适合你？</div>
      <div class="bodybottom">
        <MacItemCom v-for="item in macList" :key="item.goodName" :mac="item" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
@media only screen and (min-width: 800px) {
  .comparecontainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .comparebody {
      max-width: 1000px;
      width: 100%;
      background-color: rgb(242, 242, 242);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;

      .bodytop {
        font-size: 30px;
        font-weight: 400;
        margin-top: 10px;
      }

      .bodybottom {
        display: flex;
        align-items: flex-start;
        width: 100%;
        justify-content: space-around;
      }
    }
  }
}

// 小于800
@media only screen and (max-width: 800px) {
  ._comparecontainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .comparebody {
      width: 100%;
      background-color: rgb(242, 242, 242);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;

      .bodytop {
        font-size: 5.333vw;
        font-weight: 600;
      }

      .bodybottom {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;
        justify-content: space-around;
        row-gap: 20px;
      }
    }
  }
}
</style>
